<template>
  <StartFlowViewLayout>
    <template #header>
      <StartFlowViewHeader :formDefinition="formDefinition" :flowId="flowId"/>
    </template>

    <template #buttons>
      <StartFlowViewButtons v-model:viewId="viewId" :formDefinition="formDefinition" :flowId="flowId"/>
    </template>

    <FormEngine ref="form" :form-definition="formDefinition" :action="actionId" :view="viewId" v-model="formModel"/>

    <template #footer>
      <StartFlowViewFooter @send="send"/>
    </template>
  </StartFlowViewLayout>
</template>
<script setup>
import {onActivated, onMounted, ref, shallowRef, h, render, createApp, defineComponent} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {getAction, postAction} from '@/request';
import {readFormDefinitionVo} from '@/utils';
import StartFlowViewHeader from '@/views/StartFlowView/StartFlowViewHeader.vue';
import StartFlowViewLayout from '@/views/StartFlowView/StartFlowViewLayout.vue';
import StartFlowViewButtons from '@/views/StartFlowView/StartFlowViewButtons.vue';
import FormEngine from '@comp/FormEngine/FormEngine.vue';
import StartFlowViewFooter from '@/views/StartFlowView/StartFlowViewFooter.vue';
import HPopup from '@comp/HPopup/HPopup.vue';
import $ from 'jquery';
import createAppForModal from '@/utils/createAppForModal';
import Loading from '@/utils/Loading';
import createFlowService from '@/utils/createFlowService';

const router = useRouter();
const route = useRoute();
defineOptions({name: 'StartFlowView'});

const formDefinition = ref(null);
const flowId = shallowRef(null);
const actionId = shallowRef(null);
const viewId = shallowRef(null);
const loading = shallowRef(null);
const formModel = ref(undefined);
const form = shallowRef();

onMounted(() => {
  loadFlow();
});
onActivated(() => {
});

function getFlowId() {
  return route.query.flowId || route.params.flowId;
}

function loadFlow() {
  flowId.value = getFlowId();
  if (!flowId.value) return;

  loading.value = true;
  getAction('/form/loadFormDefinitionForFlow', {flowId: flowId.value}).then(data => {
    loading.value = false;
    if (data.success) {
      formDefinition.value = readFormDefinitionVo(data.result);
      getPropertiesFromFlow();
    }
  });
}

function getPropertiesFromFlow() {
  let flows = formDefinition.value?.flows || [];
  let flow = flows.find(f => f.id === flowId.value);
  if (flow) {
    viewId.value = flow.mobileView;
    actionId.value = flow.mobileAction;
  }
}

function send() {
  Loading.loading();
  form.value.checkFormData().then(formModel => {
    createFlowService().preStart({
      formId: formModel.id,
      formTypeId: formDefinition.value.id,
      formModel
    }, formModel => {
      doSend(formModel);
    });
  }).catch(e => {
    console.log(e)
    Loading.loaded();
  });
}

function doSend(formModel) {
  loading.value = true;
  postAction('/form/startFormFlow', {
    formData: formModel,
    flowId: flowId.value,
    actionId: actionId.value,
    formDefinitionId: formDefinition.value.id,
    remark: undefined, // 附言
    userManualSelect: formModel.userManualSelect
  }).then(data => {
    loading.value = false;
    if (data.success) {
      handleOK()
    }
  })
}

function handleOK() {
  
}
</script>
<style scoped lang="less">

</style>